<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>停车记录</title>

<link rel="stylesheet" href="../../resource/css/global.css" />
<link rel="stylesheet" href="../../resource/css/userCenter.css" />
<script src="../../resource/js/jquery-1.8.0.js"></script>
<script src="../../resource/js/template.js"></script>
<script src="../../resource/js/pageTemplate.js"></script>
<script src="../../resource/js/result.js"></script>
<script src="../../resource/js/common.js"></script>
<script type="text/javascript" src="../../resource/laydate-master/laydate.js"></script>

<style type="text/css">
body {
	background-color: #FFFFFF;
}
</style>
</head>

<body>

<!--header Begin-->
<div id="top_sidebar"></div>
<script>
$("#top_sidebar").load("top.html"); 
</script>
<!--header End-->

<!--mainContent Begin-->
<div class="mainContent">
	<p class="area">
		首页 > 停车记录</p>
	</p>
	<div class="leftNav">
		<ul>
			<li><a href="/ydtu/page/custom/mem_car_list.html"><img src="../../resource/images/menu-icon-car.png" />车辆管理</a></li>
			<li><a href="/ydtu/page/custom/tparkcar_list.html"><img src="../../resource/images/menu-icon-card.png" />月卡管理</a></li>
			<li><a href="/ydtu/page/custom/charge_list.html"><img src="../../resource/images/menu-icon-pay.png" />交易管理</a></li>
			<li class="chose_2"><a href="/ydtu/page/custom/tparkinout_page.html"><img src="../../resource/images/menu-icon-park.png" />停车记录</a></li>
		</ul>
	</div>
	<div class="rightContent">
		<div class="Usuallypark bor01">
	    	<h2><span>停车记录</span></h2>
			<table  cellpadding=0 cellspacing=0 class="vehicle_management_table2" >
				<tr>
					<td align="right">
					<form id="search_form"> 
						<table>
			      		<div class="searchCar" > 
			     			<div class="list_input_box" >
				     			<span>车辆：</span>
						    	<select name="inCarPlate" id="carSelect" class="matter">
						        <script id="memberCarList"  type="text/html">
						        <option value="">全部</option>
								{{each data as dto}}
						        <option value="{{dto.carPlate}}" {{if inCarPlate== dto.carPlate}}selected=selected{{/if}}>{{dto.carPlate}}</option>
								{{/each}}
								</script>
						        </select>
						     
						        <span>进场时间：</span>
						    	<input id="btime" class="laydate-icon_ydt" name="beginTime">&nbsp;至&nbsp;
	        					<input id="etime" class="laydate-icon_ydt" name="endTime">
	        					
			          			<input type="button" class="searchBtn" value="搜索" onclick="search()"/>
			     		 	</div> 
			     		 </div>
						</table> 
					</form>  
					</td>
		  		</tr>
				<tr>
			    	<td align="center">
			    	<table width="100%" border="0" cellspacing="0" cellpadding="0" class="dataTableCar">
			    		<thead>
					    <tr>
					      <th width="10%" align="center">序号</th>
					      <th width="10%" align="center">停车场名称</th>
					      <th width="15%" align="center">进场时间|离场时间</th>
					      <th width="10%" align="center">停车时长</th>
					      <th width="15%" align="center">进场车牌|出场车牌</th>
<!-- 					      <th width="10%" align="center">进场-出场<br>会员卡</th> -->
					      <th width="10%" align="center">收费方式</th>
					      <th width="10%" align="center">应收</th>
					      <th width="10%" align="center">实收</th>
					    </tr>
					    </thead>
               			<tbody id="inOutContent">
			  			<script id="parkInOutRecord" type="text/html">
						{{if data.length > 0}}
							{{each data as dto}}
								<tr>
									<td>{{page.pageSize*(page.currentPage-1)+$index+1}}</td>
									<td>{{dto.parkName}}</td>
									<td>{{dto.inTime}}<br>{{dto.outTime}}</td>
									<td>{{dto.stopTime}}</td>
									<td>{{dto.inCarPlate}}<br>{{dto.outCarPlate}}</td>
									<!--<td>{{dto.inCardCode}}<br>{{dto.outCardCode}}</td> -->
									<td>{{if dto.chargeType==1}}
										电子支付
										{{else if dto.chargeType==2}}
										免付费 
										{{else}}
										现金
										{{/if}}
									</td>
									<td>{{dto.needPay}}</td>
									<td>{{dto.actualPay}}</td>
								</tr>
							{{/each}}
							{{else}}
							<tr><td colspan="9" style="margin-left: 20px;font-size: 17px;">暂无数据</td></tr>
						{{/if}}
						
					        <tr>
					        	<td colspan="9"  bordercolor="#EEEEEE">
					        		<div class="page">	
					        			<span  onclick="setPage(1)" >首页</span>
					        			<span  onclick="setPage(2)">上一页</span>
					        			<span class="chose_1">{{page.currentPage}}</span>
					        			<input type="hidden" name="totalPage"  id="totalPage" value="{{page.totalPage}}">
					        			<span onclick="setPage(3)">下一页</span>
					        			<span onclick="setPage(4)">末页</span>
					        		</div>		
					        	</td>			    	
				            </tr>
						</script>
						</tbody>
				  </table>
				  </td>
			  	</tr>
	    	</table>
	  	</div> 
	</div>
</div>
<!--mainContent End-->
<!--foot Begin-->
<div id="foot_sidebar"></div>
<script>
$("#foot_sidebar").load("foot.html"); 
</script>
<!--foot End-->

<script>
	var btime = {
	    elem: '#btime',
	    format: 'YYYY-MM-DD',
// 	    min: laydate.now(), //设定最小日期为当前日期
// 	    max: '2099-06-16 23:59:59', //最大日期
	    istime: true,
	    istoday: false,
	    choose: function(datas){
	    	etime.min = datas; //开始日选好后，重置结束日的最小日期
	    	etime.start = datas //将结束日的初始值设定为开始日
	    }
	};
	var etime = {
	    elem: '#etime',
	    format: 'YYYY-MM-DD',
// 	    min: laydate.now(),
// 	    max: '2099-06-16 23:59:59',
	    istime: true,
	    istoday: false,
	    choose: function(datas){
	    	btime.max = datas; //结束日选好后，重置开始日的最大日期
	    }
	};
	
	laydate(btime);
	laydate(etime);
</script>

<script>

function setPage(dir){
	if(refreshPage(dir)){
		getParkInOutList();
	}
}
function search(){
	currentPage=1;
	getParkInOutList();
}

function getParkInOutList(){
	console.log($("#search_form").serialize()+getPage());
	$.ajax({
		type: "post",
		url:"/ydtu/tparkinout/getList.htm",
		data:$("#search_form").serialize()+getPage(), 
		dataType:"json",
		async: false,
		success:function(data){
			checkResult(data.result);
			var html = template("parkInOutRecord", data);
			$("#inOutContent").html(html);
		}
	});
}

$(function(){
	$.ajax({
		type: "post",
		url:"/ydtu/tmembercar/getList.htm",
		dataType:"json",
		success:function(data){
			checkResult(data.result);
			var html = template("memberCarList", data);
			$("#carSelect").html(html);
		}
	});
	getParkInOutList();
})

</script>
</body>
</html>
